<template>
	<view class="content">
		<view class="order-banner">
			<view class="order-title">
				<view v-for="(items, index) in titleList" :key="index" class="title-list" :class="current===items.index?'active':''"
				 @click="changeTitle(index)">{{ items.name }} <span>({{ items.number }})</span></view>
			</view>
			<view v-if="1===2" class="time-manage" @click="changTime()">
				<image style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<view class="order-list">
			<view class="order-items" v-for="(items, index) in list" :key="index">
				<view class="flex-view">
					<view class="order-status" :class="items.status === 1 && items.pay_status !== 3? '':'done'">
						<span class="tips-title">{{ orderType(items.status, items.pay_status) }}</span>
					</view>
					<view class="order-time">下单时间：{{ items.create_time }}</view>
				</view>
				<view class="order-content" @click="showDetail(items)">
					<view class="order-img">
						<image style="width: 100%; height: 100%;" :src="items.main_img"></image>
					</view>
					<view class="order-mess">
						<view class="order-minutiae">
							<view class="order-name">{{ items.goods_name }}</view>
							<view class="order-detail">{{ dateMode(new Date(items.take_time.replace(/-/g, '/')), 'week')}} &nbsp;&nbsp; {{ items.number }}</view>
						</view>
						<view class="order-price">￥{{ items.price }}</view>
					</view>
				</view>
				<view class="meal-take">
					<view class="take-count">
						<view class="count-all">合计：</view>
						<view class="take-price">￥{{ items.sum_price }}</view>
					</view>
					<view>
						<view class="code-content" v-if="items.status === 1 && items.pay_status ===2" @click="showCode(items)">
							<view class="code-img">
								<image style="width: 100%; height: 100%;" :src="icons.QRCode"></image>
							</view>
							<view>取餐码</view>
						</view>
						<view class="code-content" v-else-if="items.pay_status === 1" @click="createOrder(items.id)">
							去支付
						</view>
						<view class="assess" v-else-if="items.status === 2 && items.comment === 1" @click="evaluate(items)">
							查看评价
						</view>
						<view class="assess" v-else-if="items.status === 2 && items.comment !== 1" @click="evaluate(items)">
							评价
						</view>
					</view>
				</view>
			</view>
			<view class="order-note">逾期未取视为放弃，餐品将被回收</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="qr-code-content">
				<view class="qr-code-equipment">取餐码：{{ temp.take_code }}</view>
				<view class="qr-code-detail">
					<view class="qr-code-box">
						<image style="width: 100%;height: 100%;" :src="QRImg"></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="timePopup" type="bottom">
			<view class="leave_cont">
				<view class="time-header">
					<view class="time-items time-cancel" @click="timeSelect(1)">取消</view>
					<view class="time-items time-confirm" @click="timeSelect(2)">确定</view>
				</view>
				<view class="ul">
					<view class="li">
						<text>开始时间</text>
						<view class="flex1">
							<picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateChange">
								<view class="date">{{start_date}}</view>
							</picker>
						</view>
					</view>
					<view class="li">
						<text>结束时间</text>
						<view class="flex1">
							<picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
								<view class="date">{{other}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 引入二维码库
	import QR from '@/utils/wxqrcode.js'; // 二维码生成器
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				start_date: currentDate,
				end_date: currentDate,
				other: '请输入',
				current: 0,
				order: {
					all: 17,
					Pending: 2
				},
				type: 1,
				titleList: [{
					name: '待取',
					index: 0,
					number: 0
				}, {
					name: '全部',
					index: 1,
					number: 0
				}],
				list: [],
				total: 0,
				icons: {
					QRCode: '/static/images/icons/icon_qcm@3x.png',
					timeManage: '/static/images/icon_sj@3x.png',
					doneImg: '/static/images/carry2@3x.png',
					pendImg: '/static/images/tips2@3x.png'
				},
				qrcode: '',
				temp: {
					equipment_name: ""
				},
				QRImg: '',
				token: "",
				page: 1
			};
		},
		created() {
			let key = this.getUrlKey('key')
			if (key) {
				this.getMess(key);
			} else {
				const _this = this;
				let token = "";
				uni.getStorage({
					key: 'uerInfo',
					success: function(res) {
						_this.keepLogins(res.data.token)
					}
				});
			}

			let statu = this.getUrlKey('statu')
			if (statu) {
				const shopData = {
					type: 5 // 判断是哪种类型的操作 1.新增商品，2.新增数量，3.减少数量，4.减少商品，5.清空购物车
				}
				this.$store.commit('addToCart', shopData);
				if (parseInt(statu) === 2) {
					this.current = 1;
					this.type = 2;
				}
			}
			this.getList();
		},
		onReachBottom() {
			// console.log('触底事件')
			this.page++
			this.getList();
		},
		methods: {
			keepLogins(token) {
				const path = {
					app: "wx",
					api: "api_wx_user_keepLogin",
					version: "1.0",
					type: "1",
					data: {
						token: token
					}
				}
				this.sendSock(path)
			},
			keepLogin() {
				uni.getStorage({
					key: 'uerInfo',
					success: function(res) {
						const path = {
							app: "wx",
							api: "api_wx_user_keepLogin",
							version: "1.0",
							type: "1",
							data: {
								token: res.data.token
							}
						}
						uni.sendSocketMessage({
							data: JSON.stringify(path)
						})
					}
				});
			},
			getMess(key) {
				const path = {
					app: "wx",
					api: "api_wx_user_login",
					version: "1.0",
					type: "1",
					data: {
						key: key
					}
				}
				this.sendSock(path)
			},
			getList() {
				const path = {
					app: "wx",
					api: "api_wx_order_getList",
					version: "1.0",
					type: this.type, //1=未取，2=全部
					data: {
						page: this.page,
						returnType: this.page
					}
				}
				this.sendSock(path)
			},
			showCode(row) {
				this.temp = Object.assign({}, row); // copy obj
				this.qrcode = row.take_code;
				this.QRImg = QR.createQrCodeImg('S' + row.take_code + 'E', {
					size: parseInt(300) //二维码大小
				});
				this.$refs.popup.open();
			},
			changeTitle(index) {
				this.current = index;
				this.type = index + 1;
				this.page = 1;
				this.getList();
			},
			changTime() {
				this.$refs.timePopup.open();
			},
			// 选择日期
			bindDateChange: function(e) {
				this.start_date = e.target.value

			},
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
				this.other = this.end_date;
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			timeSelect(statu) {
				this.$refs.timePopup.close();
			},
			showTip(status) {
				return status === 1 ? this.icons.pendImg : this.icons.doneImg
			},
			evaluate(data) {
				const _this = this;
				uni.navigateTo({
					url: '/pages/feedback/index?id=' + data.id + '&comment=' + data.comment + '&' + _this.version
				})
			},
			createOrder(id) {
				const path = {
					app: "wx",
					api: "api_wx_order_againCreateOrder",
					version: "1.0",
					type: 2,
					data: {
						id: id
					}
				}
				this.sendSock(path)
			},
			showDetail(item) {
				if (item.pay_status !== 1) {
					const _this = this;
					uni.navigateTo({
						url: '/pages/order/detail?id=' + item.id + '&' + _this.version
					})
				}
			},
			sendSock(path) {
				if (this.$store.state.socketOpen) {
					uni.sendSocketMessage({
						data: JSON.stringify(path)
					});
				} else {
					this.$store.state.socketMsgQueue.push(JSON.stringify(path));
				}
				const _this = this
				uni.onSocketMessage(function(res) {
					_this.getSock(res.data)
				});
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						const key = this.getUrlKey('key')
						this.getMess(key);
					} else if (resj.code === 404) {
						if (this.token) {
							this.keepLogin();
							this.getList();
						} else {
							// console.log('token不存在')
						}
					} else {
						if (resj.api === "api_wx_user_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wx_user_keepLogin") {
							this.temporary()
						} else if (resj.api === "api_wx_order_getList" && resj.type === 1) {
							this.list = resj.data;
							this.total = resj.count
							this.titleList[0].number = resj.status.split(',')[0];
							this.titleList[1].number = resj.status.split(',')[1];
						} else if (resj.api === "api_wx_order_getList") {
							const data = resj.data
							this.list = this.list.concat(resj.data);
						} else if (resj.api === "api_wx_order_takeGoods") {
							uni.showToast({
								icon: "none",
								title: '取餐成功',
								duration: 2000
							});
							const _this = this
							setTimeout(function() {
								_this.$refs.popup.close();
								_this.current = 1;
								_this.type = 2;
								_this.getList()
							}, 500)
						} else if (resj.api === "api_wx_order_orderStatus") {
							this.getList();
						} else if (resj.api === "api_pay_index_payResult") {
							this.getList();
						} else if (resj.api === "api_wx_order_againCreateOrder") {
							const data = {
								token: resj.data.token,
								price: resj.data.money
							}
							this.pay(data)
						}
					}
				}
			}
		}
	};
</script>

<style>
	.content {
		padding: 0 30rpx;
	}

	.order-title {
		display: flex;
		align-items: flex-end;
	}

	.order-items {
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 20rpx;

	}

	.order-list {
		margin-top: 20rpx;
	}

	.order-items:not(:first-child) {
		margin-top: 40rpx;
	}

	.flex-view,
	.order-mess {
		display: flex;
		align-items: center;
	}

	.order-mess {
		flex: 1;
		justify-content: space-between;
		align-items: flex-start;
	}

	.order-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.title-list {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		padding: 10rpx 0;
		position: relative;
	}


	.order-title .title-list:not(:first-child) {
		margin-left: 36rpx;
	}

	.active:after {
		content: "";
		color: #ffc324;
		width: 19px;
		height: 3px;
		display: block;
		background-color: #ffc324;
		margin-top: 10rpx;
		position: absolute;
		left: calc(50% - 10rpx);
	}

	.order-title view:not(.active) {
		font-size: 30rpx;
		color: rgba(153, 153, 153, 1);
		border: none;
	}

	.all {
		margin-left: 60rpx;
	}

	.order-status {
		width: 90rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.order-time {
		margin-left: 15rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
	}

	.order-img {
		width: 120rpx;
		height: 120rpx;
	}

	.order-minutiae {
		margin-left: 30rpx;
	}

	.order-name {
		margin-bottom: 26rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
	}

	.order-price {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 85, 0, 1);
	}

	.order-detail {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.meal-take {
		margin-top: 30rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.code-content {
		width: 180rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(38, 141, 255, 1);
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 60rpx;
	}

	.code-img {
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.take-time {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
	}

	.take-count {
		display: flex;
		align-items: center;
	}

	.count-all {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
	}

	.take-price {
		font-size: 36rpx;
		color: rgba(51, 51, 51, 1);
	}

	.order-note {
		margin-top: 80rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
		text-align: center;
	}

	.qr-code-content {
		width: 420rpx;
		height: 532rpx;
		background: url("~@/static/images/code-BG@3x.png") no-repeat;
		background-size: 100% 100%;
	}

	.qr-code-equipment {
		width: 100%;
		height: 112rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
		line-height: 1;
	}

	.qr-code-detail {
		width: 100%;
		height: 420rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qr-code-box {
		width: 344rpx;
		height: 344rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(51, 51, 51, 1);
		border-radius: 10rpx;
		padding: 12rpx;
		box-sizing: border-box;
	}

	.time-manage {
		width: 70rpx;
		height: 70rpx;
		padding-top: 10rpx;
	}

	.order-banner {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.time-manage {
		display: flex;
		align-items: center;
	}

	.leave_cont {
		background-color: #ffffff;
	}

	.leave_cont .ul {
		padding: 0 30rpx;
	}

	.leave_cont .ul .li {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #efefef;
	}

	.leave_cont .ul .li text {
		padding: 40rpx 0;
		font-size: 34rpx;
		font-family: '黑体';
	}

	.leave_cont .ul .li .flex1 {
		flex: 1;
		text-align: right;
		padding-right: 25rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.date {
		height: 42rpx;
	}

	.time-header {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e5e5e5;
		height: 98rpx;
		align-items: center;
	}

	.time-items {
		padding: 0rpx 28rpx;
		font-size: 36rpx;
	}

	.time-cancel {
		color: #888;
	}

	.time-confirm {
		color: #007aff;
	}

	.assess {
		width: 180rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(153, 153, 153, 1);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 1;
	}

	.order-status {
		background: url("~@/static/images/tips2@3x.png") no-repeat;
		background-size: 100% 100%;
	}

	.order-status.done {
		background: url("~@/static/images/carry2@3x.png") no-repeat;
		background-size: 100% 100%;
	}

	.tips-title {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 1;
	}
</style>
